<template>
  <div class="food-register">
    <BackButton />
    <header>
      <p>新增食品信息</p>
    </header>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="foodName">食品名称：</label>
        <input type="text" id="foodName" v-model="form.foodName" required />
      </div>
      <div class="form-group">
        <label for="foodPrice">食品价格：</label>
        <input type="number" step="0.01" id="foodPrice" v-model="form.foodPrice" required />
      </div>
      <div class="form-group">
        <label for="foodExplain">食品描述：</label>
        <textarea id="foodExplain" v-model="form.foodExplain" required></textarea>
      </div>
      <div class="form-group">
        <label for="foodImg">食品图片：</label>
        <input type="file" id="foodImg" @change="handleFileUpload" />
      </div>
      <div class="form-group">
        <button type="submit">新增食品</button>
      </div>
    </form>
  </div>
</template>

<script>
import axios from 'axios';
import backButton from "@/components/BackButton.vue";

export default {
  name: 'FoodRegister',
  components: { backButton },
  data() {
    return {
      form: {
        foodName: '',
        foodPrice: '',
        foodExplain: '',
        foodImg: null,
        businessId: ''
      }
    };
  },
  created() {
    // 从路由的 query 中获取 businessId
    this.form.businessId = this.$route.query.businessId;
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      this.form.foodImg = file;
    },
    submitForm() {
      const formData = new FormData();
      formData.append('foodName', this.form.foodName);
      formData.append('foodPrice', parseFloat(this.form.foodPrice)); // 确保价格为数值
      formData.append('foodExplain', this.form.foodExplain);

      if (this.form.foodImg) {
        formData.append('foodImg', this.form.foodImg);
      }

      formData.append('businessId', this.form.businessId);

      axios.post('/FoodController/addFood', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
          .then((response) => {
            alert('食品信息新增成功！');
            // 提交后跳转回商家管理页面，传递 businessId 作为查询参数
            this.$router.push({ path: '/merchant/manage', query: { businessId: this.form.businessId } });
          })
          .catch((error) => {
            console.error('新增食品失败:', error);
            alert('新增食品信息失败，请重试。');
          });
    }
  }
};
</script>



<style scoped>
.food-register header {
  width: 100%;
  padding: 10px;
  background-color: #0097FF;
  color: #fff;
  text-align: center;
}

.food-register .form-group {
  margin: 20px 0;
}

.food-register label {
  display: block;
  margin-bottom: 5px;
}

.food-register input[type="text"],
.food-register input[type="number"],
.food-register textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.food-register input[type="file"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

.food-register button {
  width: 100%;
  padding: 10px;
  background-color: #FF9800;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.food-register button:hover {
  background-color: #e68a00;
}
</style>
